{% extends "layout.html" %}
{% load static %}
{% block css %}
<script src="{% static 'plugins/axios/1.6.7/axios.min.js' %}"></script>
{% endblock %}
{% block content %}

    <fieldset class="layui-elem-field layui-field-title">
        <legend>表单</legend>
    </fieldset>
    <form  id="taskForm">
        {% for field in form %}
        <div class="layui-form-item">
            <label class="layui-form-label">{{field.label}}</label>
            <div class="layui-input-block">
                {{field}}
                <span class="layui-font-red"></span>
            </div>
        </div>
        {% endfor %}
    </form>
    <div class="layui-input-block">
        <button id="submit" class="layui-btn"  onClick="handleClickSubmitTask()">立即提交</button>
    </div>
    <hr />
<!-- 数据表格 -->
<table class="layui-table">
    <!-- 表格内容 S-->
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>密码</th>
            <th>负责人</th>
            <th>级别</th>
        </tr>
        </thead>
        <tbody>
        {% for item in data_list %}
        <tr>
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.information}}</td>
            <td>{{item.user}}</td>
            <td>{{item.get_level_display}}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</table>
<div id="LayPageComps"></div>

    <hr />
    <div style="height:400px"></div>
    <hr />
    任务列表
    <hr />
    <button class="layui-btn layui-btn-sm" onclick="handleClickGet()">发送get请求</button>
    <button class="layui-btn layui-btn-sm" onclick="handleClickPost()">发送post请求</button>
    <hr />
    <form id="loginForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="user" placeholder="用户名" class="layui-input"/>
            </div>
            <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
            <input type="text" name="age" placeholder="性别" class="layui-input"/>
            </div>
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" placeholder="邮箱" class="layui-input"/>
            </div>
        </div>
    </form>
    <button class="layui-btn layui-btn-sm" onclick="handleClickSubmit()">表单提交</button>
{% endblock %}

{% block js %}
<script>
    function handleClickGet(){
        console.log("get")
        axios({
            method: 'get', // 默认为 get，这里可以省略
            url:'/task/ajax/',
            params:{
                a:1,
                b:2
            }
        }).then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })
    }

    function handleClickPost(){
        console.log("post")
        axios({
            method: 'post', // 默认为 get，这里可以省略
            url:'/task/ajax/',
            data:{
                name:'python'
            }
        }).then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })
    }
    function handleClickSubmit(){
        // 获取表单项中的全部name属性跟值，当年面试没过死在这上面了
        let form = document.getElementById('loginForm')
        let formData = new FormData(form);
        axios({
            method: 'post', // 默认为 get，这里可以省略
            url:'/task/ajax/',
            data:formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })
    }

    // 使用ajax 来提交
    function handleClickSubmitTask(){
        let form = document.getElementById('taskForm')
        let formData = new FormData(form);
        document.querySelectorAll('span.layui-font-red').forEach(span => span.innerText = ''); // 使用 forEach 遍历并清空每个 span 的文本
        axios({
            method: 'post', // 默认为 get，这里可以省略
            url:'/task/add/',
            data:formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(res=>{
            console.log(res)
            const { status,error } = res.data;
            if(status){
                window.location.reload()
            }else{
                for(let key in error){
                    document.getElementById(`id_${key}`).parentNode.querySelector('span.layui-font-red').innerText=error[key]['0']
                }
            }
        }).catch(err=>{
            console.log(err)
        })
    }
</script>
<script src="{% static 'js/pagination.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        initPagination('LayPageComps', {{totals}}, {{current_page}}, {{page_size}});
    });
</script>
{% endblock %}

